<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>字典管理</title>
    <div th:replace="common/base"></div>
</head>
<body>
<div class="layuimini-container">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
                    <div style="margin: 0px 0px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item" style="margin: 0px">
                                <div class="layui-input-inline">
                                    <input type="text" name="keyword" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline">
                                    <button id="btnSearch" type="submit" class="layui-btn layui-btn-primary" lay-submit
                                            lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <script type="text/html" id="toolbarDict">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"><i
                                    class="layui-icon">&#xe654;</i>添加
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">
                                <i
                                        class="layui-icon">&#xe640;</i>删除
                            </button>
                        </div>
                    </script>

                    <table id="dictTable" lay-filter="dictTable"></table>

                    <script type="text/html" id="currentTableBar">
                        <a class="layui-btn layui-btn-primary layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs data-count-delete" lay-event="delete">删除</a>
                    </script>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 10px;">
                    <div style="margin: 0px 0px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item" style="margin: 0px">
                                <div class="layui-input-inline"
                                     style="height: 43px;line-height: 43px;padding-left: 20px">
                                    字典详情<span class="shu"></span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <script type="text/html" id="toolbarDictDetail">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"><i
                                    class="layui-icon">&#xe654;</i>添加
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">
                                <i
                                        class="layui-icon">&#xe640;</i>删除
                            </button>
                        </div>
                    </script>

                    <table id="dictDetailTable" lay-filter="dictDetailTable"></table>

                    <script type="text/html" id="currentDetailTableBar">
                        <a class="layui-btn layui-btn-primary layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs data-count-delete" lay-event="delete">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 字典表单弹窗 -->
<script type="text/html" id="dictDialog">
    <div id="dictFrm" class="layui-form model-form" action="" lay-filter="dictFrm">
        <input type="hidden" name="id"/>
        <input type="hidden" name="isDeleted" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" lay-verify="required" placeholder="请输入描述"
                          autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="dictSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </div>
</script>
<!-- 字典详情表单弹窗 -->
<script type="text/html" id="dictDetailDialog">
    <div id="dictDetailFrm" class="layui-form model-form" action="" lay-filter="dictDetailFrm">
        <input type="hidden" name="id"/>
        <input type="hidden" name="dictId">
        <input type="hidden" name="isDeleted" value="0"/>
        <div class="layui-form-item">
            <label class="layui-form-label">字典标签</label>
            <div class="layui-input-block">
                <input type="text" name="label" lay-verify="label" autocomplete="off" placeholder="请输入名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">字典值</label>
            <div class="layui-input-block">
                <textarea name="value" lay-verify="required" placeholder="请输入字典值"
                          autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">排序</label>
            <div class="layui-input-block">
                <input name="sort" placeholder="请输入排序号" type="number" class="layui-input"
                       lay-verify="required|number" required/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="dictDetailSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </div>
</script>
<div th:replace="common/baseJS"></div>
<script th:inline="none">
    layui.use(['form', 'table', 'iconPickerFa', 'ab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            iconPickerFa = layui.iconPickerFa,
            ab = layui.ab,
            selObj = null;

        table.render({
            elem: '#dictTable',
            url: '/system/dict/findPage',
            toolbar: '#toolbarDict',
            defaultToolbar: [],
            height: 'full-100',
            cols: [[
                // {type: "checkbox", width: 50},
                {type: 'numbers'},
                {field: 'id', width: 80, title: 'ID', hide: true},
                {field: 'name', title: '名称'},
                {field: 'description', title: '描述'},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            response: {
                statusName: 'status', //规定数据状态的字段名称，默认：code
                statusCode: 200, //规定成功的状态码，默认：0
                msgName: 'hint', //规定状态信息的字段名称，默认：msg
                countName: 'total', //规定数据总数的字段名称，默认：count
                dataName: 'rows' //规定数据列表的字段名称，默认：data
            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('dictTable', {
                page: {curr: 1},
                where: data.field
            }, 'data');

            // 设置detail
            dplDetailTable.reload({url: null, data: []});
            selObj = null;
            return false;
        });
        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 2) {
                    return '模块名称至少得2个字符啊';
                }
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(dictTable)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                showEditModel();
            } else if (obj.event === 'delete') {  // 监听删除操作
                if (selObj == null) {
                    ab.window.msg("请至少选择一条数据！", "error");
                    return;
                }
                ab.util.deleteForm({
                    url: "/system/dict",// 请求地址
                    type: "delete",// 请求提交方式
                    data: JSON.stringify([selObj.id]),// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        $("#btnSearch").click();
                    }
                });
            }
        });

        /* 表格操作列点击事件 */
        table.on('tool(dictTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                showEditModel(data);
            } else if (obj.event === 'delete') {
                ab.util.deleteForm({
                    url: "/system/dict",// 请求地址
                    type: "delete",// 请求提交方式
                    data: JSON.stringify([data.id]),// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        $("#btnSearch").click();
                    }
                });
            }
        });

        /* 监听行单击事件 */
        table.on('row(dictTable)', function (obj) {
            selObj = obj.data;
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            dplDetailTable.reload({where: {dictId: obj.data.id}, page: {curr: 1}, url: '/system/dict/findDetailPage'});
        });

        //监听表格复选框选择
        table.on('checkbox(dictTable)', function (obj) {
            // console.log(obj)
        });

        /* 显示表单弹窗 */
        function showEditModel(mData) {
            ab.window.open({
                id: "addDict",
                title: (mData ? '修改' : '添加') + '字典',
                content: $("#dictDialog").html(),//"/system/dict/form",
                area: "500px",
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('dictFrm', mData);
                    //监听提交
                    form.on('submit(dictSubmit)', function (data) {
                        if (data.field.icon) data.field.icon = "fa " + data.field.icon;
                        console.log(data)
                        ab.util.submitForm({
                            url: "/system/dict",// 请求地址
                            type: !mData ? "post" : "put",// 请求提交方式
                            data: JSON.stringify(data.field),// 发送回去的数据 JSON.stringify(data)
                            success: function (data) {
                                layer.close(dIndex);
                                $("#btnSearch").click();
                            }
                        });
                        return true;
                    });

                    // 禁止弹窗出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        //-------------------------------------detail-------------------------------------

        var dplDetailTable = table.render({
            elem: '#dictDetailTable',
            // url: '/system/dict/detail/findPage',
            data: [],
            toolbar: '#toolbarDictDetail',
            defaultToolbar: [],
            height: 'full-100',
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', hide: true},
                {field: 'dictId', width: 80, title: '字典id', hide: true},
                {field: 'label', title: '标签'},
                {field: 'value', title: '值'},
                {field: 'sort', title: '排序'},
                {title: '操作', minWidth: 150, toolbar: '#currentDetailTableBar', align: "center"}
            ]],
            response: {
                statusName: 'status', //规定数据状态的字段名称，默认：code
                statusCode: 200, //规定成功的状态码，默认：0
                msgName: 'hint', //规定状态信息的字段名称，默认：msg
                countName: 'total', //规定数据总数的字段名称，默认：count
                dataName: 'rows' //规定数据列表的字段名称，默认：data
            },
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(detail-data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            //执行搜索重载
            table.reload('dictDetailTable', {
                page: {curr: 1},
                where: {searchParams: result}
            }, 'data');

            return false;
        });
        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 2) {
                    return '模块名称至少得2个字符啊';
                }
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(dictDetailTable)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                if (selObj == null) {
                    ab.window.msg("请先选择所属的字典！", "error");
                    return false;
                }
                showDetailEditModel();
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('dictDetailTable')
                    , data = checkStatus.data;
                if (data.length == 0) {
                    ab.window.msg("请至少选择一条数据！", "error");
                    return;
                }
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].id);
                }
                ab.util.deleteForm({
                    url: "/system/dict/detail",// 请求地址
                    type: "delete",// 请求提交方式
                    data: JSON.stringify(ids),// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        dplDetailTable.reload();
                    }
                });
            }
        });

        /* 表格操作列点击事件 */
        table.on('tool(dictDetailTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                showDetailEditModel(data);
            } else if (obj.event === 'delete') {
                ab.util.deleteForm({
                    url: "/system/dict/detail",// 请求地址
                    type: "delete",// 请求提交方式
                    data: JSON.stringify([data.id]),// 发送回去的数据 JSON.stringify(data)
                    success: function (data) {
                        dplDetailTable.reload();
                    }
                });
            }
        });

        //监听表格复选框选择
        table.on('checkbox(dictDetailTable)', function (obj) {
            // console.log(obj)
        });

        /* 显示表单弹窗 */
        function showDetailEditModel(mData) {
            ab.window.open({
                id: "editDictDetail",
                title: (mData ? '修改' : '添加') + '字典详情',
                content: $("#dictDetailDialog").html(),
                area: "500px",
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('dictDetailFrm', mData);
                    //监听提交
                    form.on('submit(dictDetailSubmit)', function (data) {
                        if (data.field.icon) data.field.icon = "fa " + data.field.icon;
                        if (!mData) {
                            data.field.dictId = selObj.id;
                        }
                        ab.util.submitForm({
                            url: "/system/dict/detail",// 请求地址
                            type: !mData ? "post" : "put",// 请求提交方式
                            data: JSON.stringify(data.field),// 发送回去的数据 JSON.stringify(data)
                            success: function (data) {
                                layer.close(dIndex);
                                dplDetailTable.reload();
                            }
                        });
                        return true;
                    });

                    // 禁止弹窗出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }
    });
</script>

</body>
</html>